<%--
  Created by IntelliJ IDEA.
  User: 宋晓博
  Date: 2022/1/13
  Time: 13:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>京东商城</title>
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link type="text/css" rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.css"/>
    <style type="text/css">
        a {
            color: #666;
            text-decoration: none;
        }
        .row1{
            height: 80px;
            display: block;
            cursor: pointer;
            background-color: rgb(204, 16, 22);
        }
        .row1 .jd_container{
            width: 1190px;
            margin: 0 auto;
            background-image: url(/static/img/topshow/1.png);
            /*background-size: cover;*/
            /*background-repeat: no-repeat;*/
            /*background-position: 50% 0;*/
            position: relative;
            height: 100%;
        }
        .jd_close {
            position: absolute;
            right:0px;
            top: 5px;
            width: 20px;
            height: 20px;
            cursor: pointer;
            font-size: 12px;
            color: #fff;
            background: #9e191e;
            text-align: center;
        }
        .row2 {
            background-color: #e3e4e5;
            border-bottom: 1px solid #ddd;
            height: 30px;
            line-height: 30px;
        }
        .w{
            width: 1190px;
            margin: auto;
            line-height: 30px;
            color: #999;
            text-align: center;
            font-size: 12px;
        }
        .row2 .shanxi{
            padding: 0px 15px;
        }
        .row2 .xiaozi {
            width: 10%;
            padding: 0px 0px;
        }
        .spacer {
            float: right;
            overflow: hidden;
            margin: 11px 5px 0;
            width: 1px;
            height: 10px;
            background-color: #ccc;
        }
        .row3{
            height: 140px;
            border-bottom: 1px solid #ddd;
        }
        .row3 .logo{
            display: block;
            width: 190px;
            height: 120px;
            background: rgb(255, 255, 255);
        }
        .row3 .logo img{
            display: block;
            height: 120px;
            margin: 0px auto;
            width: 100%;
        }
        .f1{
            margin: 25px 0px 0px 0px;
        }
        .f2{
            margin: 0px ;
        }
        .row3 .qiye {
            padding: 0px 0px;
            color: #999999;
            font-size: 12px;
            text-align: center;
            width: 11%;
        }
        .row3 .miaosha {
            padding: 12px 0px;
            width: 10%;
            font-size: 14px;
            text-align: center;
            color: #333333;
        }
        #find{
            padding-right: 0px;
        }

        #zoomout{
            padding-left: 0px;
        }
        .zoomoutimg{
            font-size: 18px;
        }
        .cartimg{
            font-size: 18px;
            color: #e1251b;
        }
        #cartnumber{
            font-size: 14px;
            position: relative;
            top: -4px;
            background-color: #e1251b;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row row1">
        <div class="jd_container">
            <a herf="javascript:" class="jd_close"><span class="glyphicon glyphicon-remove"></span></a>
        </div>
    </div>
    <div class="row row2">
        <div class="w">
            <div class="row">
                <div class="col-md-1 shanxi">
                    <div><span class="glyphicon glyphicon-chevron-down"></span>陕西</div>
                </div>
                <div class="col-md-8 col-md-offset-3">
                    <div class="col-md-1 xiaozi xian">
                        你好，${empty(sessionScope.sys_user.name)?"<a href='/logIn.jsp'>请登录</a>":(sessionScope.sys_user.name)}
                    </div>
                    <div class="col-md-1 xiaozi"><a href='/regist.jsp'>免费注册<div class="spacer"></div></a></div>
                    <div class="col-md-1 xiaozi">我的订单<div class="spacer"></div></div>
                    <div class="col-md-1 xiaozi">我的京东<div class="spacer"></div></div>
                    <div class="col-md-1 xiaozi">京东会员<div class="spacer"></div></div>
                    <div class="col-md-1 xiaozi">企业采购<div class="spacer"></div></div>
                    <div class="col-md-1 xiaozi">客户服务<div class="spacer"></div></div>
                    <div class="col-md-1 xiaozi">网站导航<div class="spacer"></div></div>
                    <div class="col-md-1 xiaozi">手机京东<div class="spacer"></div></div>
                    <div class="col-md-1 xiaozi">网站无障碍</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row row3">
        <div class="w">

                <div class="col-md-2 logo">
                    <img src="/static/img/logo.gif" alt="京东商城">
                </div>

                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-11 col-md-offset-1">
                            <div class="row f1">
                                <div class="col-md-9">
                                    <div class="row">
                                        <form action="goods" method="get">
                                            <input type="hidden" name="method" value="selectGoodsByType">
                                            <div class="col-md-11" id="find">
                                                <div class="input-group sousuo">
                                                    <input type="text" class="form-control" placeholder="开始搜索" name="words"/>
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-camera"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-1" id="zoomout">
                                                <button type="submit" class="btn btn-danger">
                                                    <span class="glyphicon glyphicon-zoom-in zoomoutimg"></span>
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <a href="/cart?method=showCart" class="btn btn-default" id="mycart" role="button">
                                        <ul class="nav nav-pills" role="tablist">
                                            <li role="presentation">
                                                <span class="glyphicon glyphicon-shopping-cart cartimg"></span>
                                                <span class="badge" id="cartnumber">${sessionScope.sys_cart.cart.size()}</span>
                                                <%--  购物车数量角标显示--%>
                                            </li>
                                            我的购物车
                                        </ul>
                                    </a>
                                </div>
                            </div>

                            <div class="row f2">
                                <div class="col-md-9 ">
                                    <div class="col-md-1 qiye">家具年货</div>
                                    <div class="col-md-1 qiye">手机潮礼</div>
                                    <div class="col-md-1 qiye">家具焕新</div>
                                    <div class="col-md-1 qiye">拍卖盛典</div>
                                    <div class="col-md-1 qiye">服饰清仓</div>
                                    <div class="col-md-1 qiye">双旦礼遇</div>
                                    <div class="col-md-1 qiye">游戏电视</div>
                                    <div class="col-md-1 qiye">元旦新品</div>
                                    <div class="col-md-1 qiye">美妆新选</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row f3">
                        <div class="col-md-1 miaosha">秒杀</div>
                        <div class="col-md-1 miaosha">优惠券</div>
                        <div class="col-md-1 miaosha">PLUS会员</div>
                        <div class="col-md-1 miaosha">品牌闪购</div>
                        <div class="col-md-1 miaosha">拍卖</div>
                        <div class="col-md-1 miaosha">京东家电</div>
                        <div class="col-md-1 miaosha">京东超市</div>
                        <div class="col-md-1 miaosha">京东生鲜</div>
                        <div class="col-md-1 miaosha">京东国际</div>
                        <div class="col-md-1 miaosha">京东云</div>
                    </div>
                </div>

                <div class="col-md-2">
                    <img src="/static/img/erweima.png" class="img-thumbnail">
                </div>
            </div>
        </div>
    </div>


</body>

<script type="text/javascript" src="/static/bootstrap-3.4.1-dist/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script type="text/javascript">
    $(function () {
        $(".jd_close").click(function () {
            console.log("点击了顶部广告关闭");
            $(".row1").css("display","none");
            console.log("顶部广告已关闭");
        });
    })
</script>.
</html>
